@import 'utils';
.MarkdownRender {
  text-align: start;
  font-size: 1.125rem;
  word-break: break-word;
  word-wrap: break-word;
  font-family: 'Noto Serif KR', sans-serif;
  color: $oc-gray-8;
  a {
    color: $oc-violet-5;
    &:hover {
      text-decoration: underline;
      color: $oc-violet-4;
    }
  }
  p {
    line-height: 1.75;
    font-weight: 400;
    color: $oc-gray-7;
  }
  strong,
  b {
    font-weight: 600;
  }
  p + p {
    margin-top: 1.5em;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $oc-gray-9;
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 1em;
    & code {
      font-weight: 600;
    }
  }
  &.atom-one {
    @import 'prism-atom-one';
  }
  &.dracula {
    @import 'prism-dracula';
  }
  &.github {
    @import 'prism-github';
  }
  &.monokai {
    @import 'prism-monokai';
  }
  &.duotone-light {
    @import 'prism-duotone-light';
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    code {
      padding-left: 0.3em;
      padding-right: 0.3em;
      padding-top: 0.1em;
      padding-bottom: 0.1em;
      border-radius: 3px;
      background: $oc-gray-1;
      border: 1px solid $oc-gray-4;
      color: $oc-gray-6;
      margin-left: 0.3em;
      margin-right: 0.3em;
    }
  }
  p,
  blockquote,
  table,
  pre {
    margin: 15px 0;
  }
  blockquote {
    margin-top: 2em;
    margin-bottom: 2em;
  }
  pre {
    padding: 1em;
    margin: 0.5em 0;
    overflow: auto;
    border: 1px solid $oc-gray-1;
    background: rgb(250, 250, 250);
    code {
      font-family: 'Inconsolata', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
        monospace;
      font-size: 0.9em;
      line-height: 1.5;
    }
  }
  li {
    line-height: 1.75;
  }
  ul,
  ol {
    font-weight: 400;
    color: $oc-gray-7;
  }
  ul {
    padding-left: 30px;
  }
  li + li {
    margin-top: 0.25em;
  }
  ol {
    padding-left: 30px;
  }
  ol li ul:first-of-type {
    margin-top: 0px;
  }
  hr {
    border-top: 1px solid $oc-gray-3;
    margin: 15px 0;
    padding: 0;
  }
  & > h2:first-child {
    margin-top: 0;
    padding-top: 0;
  }
  & > h1:first-child {
    margin-top: 0;
    padding-top: 0;
  }
  & > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0;
  }
  & > h3:first-child,
  & > h4:first-child,
  & > h5:first-child,
  & > h6:first-child {
    margin-top: 0;
    padding-top: 0;
  }
  a:first-child h1,
  a:first-child h2,
  a:first-child h3,
  a:first-child h4,
  a:first-child h5,
  a:first-child h6 {
    margin-top: 0;
    padding-top: 0;
  }
  h1 + p,
  h2 + p,
  h3 + p,
  h4 + p,
  h5 + p,
  h6 + p,
  ul li > :first-child,
  ol li > :first-child {
    margin-top: 0;
  }
  dl {
    padding: 0;
  }
  dl dt {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px;
  }
  dl dt:first-child {
    padding: 0;
  }
  dl dt > :first-child {
    margin-top: 0;
  }
  dl dt > :last-child {
    margin-bottom: 0;
  }
  dl dd {
    margin: 0 0 15px;
    padding: 0 15px;
  }
  dl dd > :first-child {
    margin-top: 0;
  }
  dl dd > :last-child {
    margin-bottom: 0;
  }
  blockquote {
    border-left: 4px solid #ddd;
    padding: 0 15px;
    color: #777;
  }
  blockquote > :first-child {
    margin-top: 0;
  }
  blockquote > :last-child {
    margin-bottom: 0;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 100%;
    font: inherit;
  }
  table th {
    font-weight: bold;
    border: 1px solid #ccc;
    padding: 6px 13px;
  }
  table td {
    border: 1px solid #ccc;
    padding: 6px 13px;
  }
  table tr {
    border-top: 1px solid #ccc;
    background-color: #fff;
  }
  table tr:nth-child(2n) {
    background-color: #f8f8f8;
  }
  img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    margin-top: 3em;
    margin-bottom: 3em;
    pointer-events: none;
  }
  .youtube {
    background: $oc-gray-0;
    border-radius: 4px;
    display: block;
    margin: auto;
    width: 768px;
    max-width: 100%;
    height: 430px;
    @include media('<768px') {
      height: 300px;
    }
  }
  blockquote {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .twitter-wrapper {
    display: flex;
    justify-content: center;
    height: 580px;
    align-items: center;
    blockquote {
      background: $oc-gray-0;
      border-radius: 4px;
      width: 500px;
      height: 400px;

      border-left: none;
    }
  }
}
